<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col class="left" :span="device === 'mobile' ? 24 : 19">
        <el-carousel v-if="showCarousel && carouselList.length > 0" v-show="carouselShow" indicator-position="outside" :interval="intervalTime" type="card" height="360px" style="margin: 0 100px">
          <el-carousel-item v-for="item in carouselList" :key="item.articleId">
            <a href="#">
              <el-image :src="getImageSrc(item.thumbnail)" fit="contain" @click="readBlog(item.articleId)" />
            </a>
          </el-carousel-item>
        </el-carousel>
        <blog-list :classify="classify" :tag="tag" :keyword="keyword" @read="readBlog" @edit="editBlog" @openCenter="openCenter" />
      </el-col>
      <el-col v-if="device!=='mobile'" :span="5">
        <div class="right slider">
          <pan-thumb v-if="user" :image="user.avatar" :height="'130px'" :width="'130px'" :hoverable="false">
            <!-- 个人主页 -->
            <el-tooltip content="个人主页" placement="bottom">
              <el-link type="primary" @click="openCenter(user.userId)">{{ user.userName }}</el-link>
            </el-tooltip>
          </pan-thumb>
          <pan-thumb v-if="!user" :image="null" :height="'130px'" :width="'130px'" :hoverable="false">
            <el-tooltip content="请登录" placement="bottom">
              <el-link type="primary" @click="userLogin()">请登录</el-link>
            </el-tooltip>
          </pan-thumb>
          <div v-if="user" class="right-content">
            <el-badge :value="userPosts" class="item">
              <el-button size="mini" round>发布</el-button>
            </el-badge>
            <el-badge :value="userWatchers" class="item">
              <el-button size="mini" round>关注</el-button>
            </el-badge>
            <el-badge :value="userWatched" class="item">
              <el-button size="mini" round>粉丝</el-button>
            </el-badge>
          </div>
          <el-divider />
          <div class="tags">
            <el-card shadow="never">
              <div slot="header">
                <span>热门标签</span>
              </div>
              <div ref="tag_echart" style="height:230px;" />
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BlogList from './blog/List'
import PanThumb from '@/components/PanThumb'
import echarts from 'echarts'
require('echarts/theme/macarons')
import 'echarts-wordcloud'

export default {
  name: 'Main',
  components: { PanThumb, BlogList },
  data() {
    return {
      showCarousel: true,
      carouselList: [],
      intervalTime: 5000, // 轮播图的自动滚动延迟时间
      carouselShow: true, // 轮播图的的是否显示控制变量
      userPosts: 0,
      userWatchers: 0,
      userWatched: 0,
      tags: [],
      tagChart: undefined,
      classify: undefined,
      tag: undefined,
      keyword: undefined
    }
  },
  computed: {
    ...mapState({
      device: state => state.app.device,
      user: state => state.user.info
    })
  },
  watch: {
    $route: {
      handler: function(route) {
        this.keyword = route.query && route.query.keyword
        if (this.keyword) {
          this.showCarousel = false
        }
        this.classify = route.query && route.query.classify
        if (this.classify) {
          this.showCarousel = false
        }
        this.tag = route.query && route.query.tag
      },
      immediate: true
    }
  },
  mounted() {
    this.initUserInfo()
    if (this.showCarousel) {
      this.initCarouselList()
      this.initTagEchart()
    }
  },
  methods: {
    initUserInfo() {
      if (this.user.userId) {
        this.$http.get('/blog/center/' + this.user.userId).then(response => {
          this.userPosts = response.param.userPosts
          this.userWatchers = response.param.userWatchers
          this.userWatched = response.param.userWatched
        }).catch(e => {})
      }
    },
    initCarouselList() {
      this.$http.get('/blog/query/article', {
        params: {
          current_page: 1,
          page_length: 8,
          featured: true
        }
      }).then(response => {
        this.carouselList = response.param.data
      }).catch(e => {})
    },
    initTagEchart() {
      this.tagChart = echarts.init(this.$refs.tag_echart)
      this.tagChart.showLoading()
      this.tags = []
      const this_ = this
      this.$http.get('/blog/tag/list').then(response => {
        let index = 0
        response.param.forEach(tag => {
          this.tags.push({
            name: tag.name,
            value: index++
          })
        })
        this.tagChart.hideLoading()
        this.tagChart.setOption(this.getTagOptions(this.tags))
        this.tagChart.on('click', function(params) {
          this_.$route.push({ path: '/home', query: {
            tag: params.name
          }})
        })
      }).catch(e => {})
    },
    getTagOptions(data) {
      return {
        series: [
          {
            type: 'wordCloud',
            shape: 'diamond',
            gridSize: 30,
            sizeRange: [10, 40],
            rotationRange: [0, 0],
            autoSize: {
              enable: true,
              minSize: 12
            },
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ')'
                  )
                }
              }
            },
            data: data
          }
        ]
      }
    },
    getImageSrc(thumbnail) {
      return this.$api.getImageSrc(thumbnail)
    },
    async readBlog(articleId) {
      this.$router.push({ path: '/info', query: {
        articleId: articleId
      }})
    },
    async editBlog(articleId) {
      this.$router.push({ path: '/create', query: {
        articleId: articleId,
        redirect: this.$router.fullPath
      }})
    },
    async openCenter(userId) {
      this.$router.push({ path: '/center', query: {
        userId: userId
      }})
    },
    async userLogin() {
      this.$router.push({ path: '/login', query: this.generateQuery('redirect', this.$router.fullPath) })
    }
  }
}
</script>

<style scoped lang="less">
.slider {
  padding-top: 50px;
}
.right {
  text-align: center;
  .right-logo {
    width: 130px;
    border-radius: 50%;
    animation: mylogo 3s;
    -moz-animation: mylogo 3s; /* Firefox */
    -webkit-animation: mylogo 3s; /* Safari and Chrome */
    -o-animation: mylogo 3s; /* Opera */
    animation-iteration-count: infinite;
  }
  .title {
    font-size: 25px;
    font-weight: bold;
  }
  .right-content {
    padding: 10px 0 20px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    .item {
      display: inline-block;
      color: #969696;
      &:not(:last-child) {
        margin-right: 10px;
      }
      .num {
        color: #333;
      }
    }
  }
  .introduce {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 14px;
      color: #969696;
    }
    .content {
      color: #333;
      line-height: 26px;
      text-align: left;
      padding: 20px 0;
    }
    .footer {
      padding-bottom: 10px;
    }
  }
  .tags {
    min-height: 200px;
    padding: 5px 0 20px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 14px;
      color: #969696;
      margin-bottom: 10px;
    }
    .el-tag {
      cursor: pointer;
      margin: 10px 10px 0 0;
    }
  }
  .classification {
    padding: 5px 0 20px 0;
    .title {
      font-size: 14px;
      color: #969696;
    }
    .item {
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
      color: #666;
      margin: 10px 10px 0 0;
    }
  }
}
@keyframes mylogo {
  0% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
  25% {
    transform: rotate(0deg) scale(1, 1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
}

@-moz-keyframes mylogo {
  0% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
  25% {
    transform: rotate(0deg) scale(1, 1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
}

@-webkit-keyframes mylogo {
  0% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
  25% {
    transform: rotate(0deg) scale(1, 1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
}

@-o-keyframes mylogo {
  0% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
  25% {
    transform: rotate(0deg) scale(1, 1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(0deg) scale(0.8, 0.8);
    opacity: 1;
  }
}
</style>
